<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title></title>
	<script type="text/javascript" src="../../vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<app-layout>
		<p>主要内容的一个段落。</p>
		<h1 slot="header">这里可能是一个页面标题</h1>
		<div>另一个主要段落。</div>
		<p slot="footer">这里有一些联系信息</p>
	</app-layout>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		components: {
			AppLayout: {
				template: '<div class="container">\
					<header>\
						<slot name="header"></slot>\
					</header>\
					<main>\
						<slot></slot>\
						<slot name="notExist"><p>这是降级使用的段落</p></slot>\
					</main>\
					<footer>\
						<slot name="footer"></slot>\
					</footer>\
				</div>'
			}
		}
	})
</script>
</body>
</html>